<template>
  <div>
    <el-card>
      <div slot="header">
        <span>我的粉丝</span>
      </div>
      <el-empty v-if="!this.userFans" description="空空如也！" style="height: 615px;"></el-empty>
      <div v-else v-for="item in this.userFans" :key="item.id">
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="3">
            <el-avatar :size="70" :src="item.fans.headimg"></el-avatar>
          </el-col>
          <el-col :span="17">
            <div class="like-content">
              <a href="" class="like-content-title-username">{{ item.fans.username }}</a>
              <p class="cloudN-center-content-text">{{ item.fans.sign }}</p>
            </div>
          </el-col>
          <el-col :span="4" class="btn-like">
            <el-button v-if="item.like === true" type="danger" size="mini" round>取消关注</el-button>
            <el-button v-else type="primary" size="mini" round>关注</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userFans: []
    }
  },
  created () {
    this.getMyFans()
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    async getMyFans () {
      const url = this.$config.urls.get('user_fans')
      // console.log(url)
      const { data: res } = await this.$http.post(url)
      if (res.code !== 0) {
        this.$message.error('用户未登录！')
        // console.log(res)
      } else {
        // console.log(res.data)
        res.data.forEach(item => {
          item.creat_time = this.$date.diffTime(item.creat_time)
        })
        this.userFans = res.data
      }
    }
  },
  computed: {},
  name: 'userArticle'
}
</script>

<style lang="less" scoped>
.like-content {
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 50%; /*偏移*/
  transform: translate(10px, -50%);
}
.like-content-title-username {
  font-weight: 600;
}
.el-button {
  width: 80px;
}
</style>
